<template>
	<view style="height: 100%;width: 100%;">
		<view class="container">
			 <!-- 根据分类类型来判断是不是一级分类 如是则显示 -->
			<block v-if="seniorGrade">
				<!-- 热评 写死的一句话 -->
				<view class="review">
					曾经我自半个诗人，见山是深情伟岸，见海是热情
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="adContainer" v-if="WxAds.length>0">
				  <ad :unit-id="WxAds[5].value" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>
				</view>
				<!-- #endif -->	
				
				<!-- 标题 -->
				<view class="title-h">
					专题分类
				</view>
			</block>
			
			<!-- 一级分类大图 -->
			<block v-if="status == 1" >
				<view class="status-ma40">
					<view class="list-one-w " v-for="(pos ,index) in categoryList" :key="pos.catid" @tap="goArticleList(pos.catid)">
						<view class="list-one-img">
							<image class="fengrui-img" :src="pos.url" mode="aspectFill"></image>
						</view>
						<view class="list-one-data-w">
							<view class="list-one-title">
								{{ pos.article_cate_title}}
							</view>
							<view class="list-ona-abstract">
								{{pos.article_cate_introduction}}
							</view>
					
						</view>
					</view>
				</view>
			</block>
			<!-- 一级双排小图 -->
			<block v-if="status == 2">
				<view class="status-ma40">
					<view class="list-two-w">
						<view class="list-two-list" v-for="(pos ,index) in categoryList" :key="pos.catid" @tap="goArticleList(pos.catid)">
							<view class="list-two-img">
								<image class="fengrui-img" :src="pos.url" mode="aspectFill"></image>
							</view>
							<view class="list-two-title">
								{{ pos.article_cate_title}}
							</view>
							<view class="list-two-abstract">
								{{pos.article_cate_introduction}}
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 二级分类 -->
			<block v-if="status == 3">
				 <scroll-view :scroll-top="scrollTop" scroll-y="true" class=" left-scorlly">
					<view :class="active === index ? 'activescroll':'right-scorlly-w'" v-for="(oneclas, index) in twoClass" :key="index" @click="selectSro(index)">
						<view class="left-scorlly-img">
							<image class="fengrui-img" :src="oneclas.url" mode="aspectFill"></image>
						</view>
						<view class="left-scorlly-title"> 
							{{ oneclas.article_cate_title }}
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="right-scorlly">
					<block v-if="twoListDate == true">
						<view class="right-scorlly-w" v-for="(twocla ,index) in twoList" :key="index"  @tap="goArticleList(twocla.catid)">
							<view class="right-scorlly-img">
								<image class="fengrui-img" :src="twocla.url" mode="aspectFill"></image>
							</view>
							<view class="right-scorlly-title">
								{{ twocla.article_cate_title }}
							</view>
							<view class="right-scorlly-title-h">
								{{ twocla.article_cate_introduction }}
							</view>
						</view>
					</block>
					<view class="no-datalist"  v-else>
						<view class="no-img">
							<image class="fengrui-img" src="../../static/data/data-no.svg" mode=""></image>
						</view>
						<view class="no-text">
							您搜索的世界不存在！或者和小姐姐跑了......
						</view>
					</view>
				</scroll-view>
			</block>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				// 分类列表
				categoryList: [],
				// 分类样式
				status: '',
				// 二级分类
				twoClass:[],
				twoList:[],
				twoListDate:true,
				seniorGrade:true,
				active:0,
				// 滑动
				scrollTop: 0,
				// #ifdef  MP-WEIXIN
				WxAds: []
				//#endif
				
			}
		},
		onLoad() {
			this.getArticleCateList();
			this.getArticleCateStatus();
			// #ifdef  MP-WEIXIN
			this.getWxAds();
			//#endif
		},
		methods: {
			
			// 二级目录
			getArticleCate: function() {
				var that = this;
				var postData = {}
				//传输信息
				app.request('/Article/getArticleCate', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.twoClass = res.data.data
							// that.selectSro(0,that.twoClass[0].catid)
							that.selectSro(0,that.twoClass[0])
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无数据"
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			// 二级目录索引
			selectSro:function(index){
				var that = this;
				that.active = index;
				console.log(index)
				var towid = that.twoClass[that.active].children;
				that.twoList = towid;
				// console.log(that.twoList.length)
				if(that.twoList == undefined || that.twoList == '' ){
					that.twoListDate = false;
				}else{
					that.twoListDate = true;
				}
			},
			
			//获取分类样式
			getArticleCateStatus: function() {
				var that = this;
				var postData = {}
				//传输信息
				app.request('/Article/getArticleCateStatus', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.status = res.data.data.status;
							if(res.data.data.status == 3){
								that.getArticleCate();
								that.seniorGrade = false;
							}else{
								that.seniorGrade = true;
							}
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无数据"
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			//获取分类列表
			getArticleCateList: function() {
				var that = this;
				var postData = {}
				//传输信息
				app.request('/Article/getArticleCateList', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.categoryList = res.data.data
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无数据"
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			//文章列表
			goArticleList: function(e) {
				uni.navigateTo({
					url: "/pages/data/dataList?catid=" + e
				})
			},
			// 条件编译 微信小程序 流量主广告
			// #ifdef  MP-WEIXIN
			getWxAds: function() {
				var that = this;
				var settingInfo = '';
				var postData = {}
				//传输信息
				app.request('/Ads/getWxAds', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							//0是Banner广告 1是激励式广告 2插屏广告 3视频广告 4视频贴片广告 5格子广告
							that.WxAds = res.data.data;
						}
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			}
			//#endif
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '专题分类',
				path: '/pages/category/category',
				imageUrl: ''
			}

		},
	}
</script>

<style>
	/* 外层组件的宽度可设置成100%或具体数值 */
	.adContainer {
	  margin: 0rpx 30rpx;
	}
	/* 没有数据时候 */
	.no-text {
		color: #ADADAD;
	}
	
	.no-img {
	
		height: 400rpx;
		width: 400rpx;
	}
	
	.no-datalist {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	/* 二级分类 */
	.activescroll{
		margin-bottom: 10rpx;
		background-color: #f7f7f7;
		padding: 30rpx 0rpx;
		color: #000000 !important;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.right-scorlly-title-h {
		color: #ADADAD;
		font-size: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.right-scorlly-title {
		color: #000000;
		margin: 20rpx 0rpx 10rpx 0rpx;
		font-size: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.right-scorlly-img {
		border-radius: 10rpx;
		height: 240rpx;
		overflow: hidden;
	}

	.right-scorlly {
		width: 70%;
		float: right;
		height: 100%;
		margin-right: 3%;
	}

	.right-scorlly-w {
		margin-bottom: 10rpx;
		padding: 30rpx 0rpx;
		color: #ADADAD;
	}

	.left-scorlly-title {
		/* color: #ADADAD; */
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
		text-align: center;
	}

	.left-scorlly-img {
		border-radius: 10rpx;
		height: 100rpx;
		width: 100rpx;
		margin: auto;
		overflow: hidden;
	}

	.left-scorlly-w {
		margin-bottom: 50rpx;

	}

	.left-scorlly {
		width: 24%;
		float: left;
		height: 100%;
		/* padding-bottom: 160rpx; */
		/* border-right: 1px #f1f1f1 solid */
	}

	/* 文章列表单排 */
	.list-ona-abstract {
		color: #ADADAD;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-one-title {
		font-size: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-one-data-w {
		margin: 28rpx;
	}

	.list-one-img {
		height: 280rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.list-one-w {
		box-shadow: 0px 2px 20px rgba(0, 15, 69, 0.1);
		border-radius: 20rpx;
		margin: 22px 0px 38px 0px;
		overflow: hidden;
	}

	/* 热评 */
	.review {
		background-color: #f9f9f9;
		padding: 32rpx;
		margin: 34rpx 30rpx;
		border-radius: 10rpx;
		color: #ADADAD;
		font-size: 24rpx;
	}

	/* 文章列表双排小图 */
	.list-two-abstract {
		color: #ADADAD;
		font-size: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 10rpx;
		/* height: 80rpx; */
	}

	.list-two-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-two-img {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list-two-list {
		border-radius: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		width: 48%;
		margin-bottom: 60rpx;
		padding-bottom: 6rpx;
	}

	.list-two-w {
		margin: 40rpx 0rpx 70rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	/* 标题 */
	.title-h {
		font-size: 32rpx;
		margin: 30rpx 30rpx 0rpx 30rpx;
	}

	.container {
		/* padding: 40rpx; */
		height: 100%;
		width: 100%;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
	page{
		height: 100%;
	}
	.status-ma40{
		margin: 40rpx;
	}
</style>
